<template>
	<view :style="{'height':`${safeDistance}rpx`}">
		<view class="search_down">
			<view class="search">
				<search :searchType="searchType" @searchInput="searchInput"></search>
			</view>
			<slot name="reservation"></slot>
			<template v-if="isDrop">
				<dropDownMenu :screenItem="screenItem" :screenTabType="screenTabType" @onchange="getSelectType"></dropDownMenu>
			</template>
			<!-- 展示下拉删选 且 选择了种类的 -->
			<template v-if="isChooseSelect">
				<view class="select" :style="{'height':`calc(100vh - ${selectHeight}rpx)`}">
					<treeSelect :selectType="chooseSelect.type" :selectName="chooseSelect.name" @getScreenItem="getScreenItem"  @close="isChooseSelect = false">
					</treeSelect>
				</view>
			</template>
		</view>
	</view>

</template>

<script>
	/**
	 * searchDown 
	 * @description 搜索下拉
	 * @property {Boolean} 	isOpenSafeDistance 是否开启安全距离
	 * @property {Boolean} 	isDrop						 是否展示下拉筛选内容 false 不展示 【默认】
	 * @property  {Number}	selectHeight 			 下拉框展示区域大小
	 * @property {String}   searchType 				 搜索框类型 【默认 text】
	 * @property {Object}   selectItem 				 选中类型
	 * @property {Object}   isRecover 				 回收下拉弹窗
	 * @property {string}   screenTabType			 下拉类型区分 【normal\reservation】
	 * @event {Function} 		change 						 uniRate 的 value 改变时触发事件，e={value:Number}
	 */
	export default {
		name: "searchDown",
		props: {
			isOpenSafeDistance: {
				type: Boolean,
				default: true,
			},
			searchType: {
				type: String,
				default: 'text'
			},
			screenTabType: {
				type: String,
				default: 'normal'
			},
			selectHeight: {
				type: Number,
				default: 224,
			},
			isDrop: {
				type: Boolean,
				default: false,
			},
			selectItem: {
				type: Object,
				default: () => {
					return {}
				}
			},
			isRecover: {
				type: Boolean,
				default: true,
			},
		},
		watch: {
			selectItem: {
				handler(newV) {
					if (newV && newV.id) {
						this.getSelectType(newV)
					}
				},
			}
		},
		data() {
			return {
				screenItem: {},
				safeDistance: 0,
				isChooseSelect: false,
				chooseSelect: {},
				chooseReservationSelectType: {},
			};
		},
		mounted() {
			this.getSafeDistance()
		},
		methods: {
			searchInput(text) {
				this.$emit('searchInput', text)
			},
			// 获取子组件 某筛选条件
			getScreenItem(value) {
				if (this.isRecover) {
					this.isChooseSelect = false
					this.chooseSelect = {}
				}
				this.screenItem = value
				this.$emit('getScreenItem', value)
			},
			// 获取筛选种类
			getSelectType(value) {
				if (this.isRecover) {
					if (value.id == this.chooseSelect.id) {
						if (this.isChooseSelect) {
							this.isChooseSelect = false
							return
						}
					}
				}
				this.getSafeDistance()
				this.isChooseSelect = true
				this.chooseSelect = value
				this.screenItem = {}
			},
			// 获取安全区域
			getSafeDistance() {
				uni.createSelectorQuery().in(this).select('.search_down').boundingClientRect((rect) => {
					this.safeDistance = (Math.floor(rect.height) + 15) * 2
				}).exec();
			}
		}
	}
</script>

<style lang="scss">
	.safe_distance {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.search_down {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999;
		background-color: #FFF;

		.select {
			position: absolute;
			left: 0;
			top: 100%;
			width: 100vw;
			height: calc();
			background-color: rgba(0, 0, 0, 0.3);
		}
	}
</style>